<extend name="Layout::layout"/>
<block name="content">
    <script>
        jQuery(document).ready(function () {
            $('.top1 ul>li:nth-child(3)').addClass("present");
        });
    </script>


    <div class="about_banner" style="background:url(__PUBLIC__/{$about['plug_ad_pic']}) no-repeat center"></div>
    <div class="about_box">
        <div class="about_box">
            <div class="about_box1">
                <div class="left">
                    <div class="left1">
                        <div class="left2">产品分类</div>
                        <div class="left3">Company profile</div>
                    </div>
                    <div class="left4">
                        <ul>
                            <foreach name="columns" item="value">
                                <li><a href="javascript:;"  data-id="{$value['c_id']}">
                                    <p>{$value['column_name']}</p></a></li>
                            </foreach>
                        </ul>
                    </div>
                </div>
                <div class="right">
                    <div class="right1">
                        <div class="right2">产品工艺</div>
                        <div class="right3">Product technology</div>
                        <div class="right4"><img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>
                            您的当前位置：产品工艺>>弹糊系列
                        </div>
                    </div>
                    <div class="right_product">
                        <ul>
                            <foreach name="products"  item="value">
                            <li><a href="Javascript:;" onclick="detail({$value['n_id']})"><img src="__PUBLIC__/{$value['news_img']}" width="265" height="169"></a>

                                <div class="right_product1"><a href="Javascript:;" onclick="detail({$value['n_id']})">{$value['title']}</a></div>
                            </li>
                            </foreach>
                        </ul>


                    </div>

                </div>

            </div>
        </div>
    </div>


    <script type="text/javascript">
        jQuery(".inBox").slide({
            titCell: ".inHd ul",
            mainCell: ".inBd",
            autoPage: true,
            effect: "leftLoop", // 是否循环，否则为 "left"
            autoPlay: true,     // 是否自动播放，否则为 false
            vis: 4              // 横向显示几列
        });
    </script>

    <script type="text/javascript">
        jQuery(".banner").slide({mainCell: ".bd ul", autoPlay: true, trigger: "click"});
    </script>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.top1 ul>li:nth-child(3)').addClass("present");
            $('.left4 ul>li:first').addClass("present");
            var column_name = "弹糊系列";
            $.ajax({
                type: 'POST',
                url: "{:U('About/other2')}",
                data: {
                    name: column_name
                },
                dataType: "html",
                success: function (data) {
                    //alert(data);
                    var data = JSON.parse(data);
                    $('.right2')[0].innerHTML = column_name;
                    $('.right4')[0].innerHTML = '<img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>' + "您的当前位置：产品分类>>" + column_name;
                    $('.right1').next('div').replaceWith('<div class="right_product" ><div class="content"></div><div class="paging_1"> <div class="paging_2" id="paging_2"></div></div></div>');
                    //console.dir(data);
                    var nums = 1;
                    var pages = Math.ceil(data.length / nums);

                    var thisDate = function (curr) {
                        var str1 = '', last = curr * nums - 1;
                        last = last >= data.length ? (data.length - 1) : last;
                        var str1 = '<ul class="news">';
                        for (var b = (curr * nums - nums); b <= last; b++) {
                            str1 += '<li onclick="detail(' + data[b].n_id + ')" style="cursor:pointer"><a><img src="__PUBLIC__/' + data[b].news_img + '" width="265" height="169"></a><div class="right_product1"><a href="detail(' + data[b].n_id + ')">' + data[b].news_title + ' </a></div></li>';
                        }
                        str1 = str1 + '</ul>';
                        return str1;
                    }

                    laypage({
                        cont: 'paging_2',
                        pages: pages,
                        jump: function (obj) {
                            $('.content')[0].innerHTML = thisDate(obj.curr);
                        }
                    })

                }
            })


            $('.left4 ul>li').click(function(){
                $('.left ul>li').attr("class","");
                $(this).attr("class","present");
                var column_name = $(this).context.innerText;
                $.ajax({
                    type: 'POST',
                    url: "{:U('About/other2')}",
                    data: {
                        name: column_name
                    },
                    dataType: "html",
                    success: function (data) {
                        //alert(data);
                        var data = JSON.parse(data);
                        $('.right2')[0].innerHTML = column_name;
                        $('.right4')[0].innerHTML = '<img src="__PUBLIC__/home/img/about_tb.gif" width="14" height="14"/>' + "您的当前位置：产品分类>>" + column_name;
                        $('.right1').next('div').replaceWith('<div class="right_product" ><div class="content"></div><div class="paging_1"> <div class="paging_2" id="paging_2"></div></div></div>');
                        //console.dir(data);
                        var nums = 1;
                        var pages = Math.ceil(data.length / nums);

                        var thisDate = function (curr) {
                            var str1 = '', last = curr * nums - 1;
                            last = last >= data.length ? (data.length - 1) : last;
                            var str1 = '<ul class="news">';
                            for (var b = (curr * nums - nums); b <= last; b++) {
                                str1 += '<li onclick="detail(' + data[b].n_id + ')" style="cursor:pointer"><a><img src="__PUBLIC__/' + data[b].news_img + '" width="265" height="169"></a><div class="right_product1"><a href="detail(' + data[b].n_id + ')">' + data[b].news_title + ' </a></div></li>';
                            }
                            str1 = str1 + '</ul>';
                            return str1;
                        }

                        laypage({
                            cont: 'paging_2',
                            pages: pages,
                            jump: function (obj) {
                                $('.content')[0].innerHTML = thisDate(obj.curr);
                            }
                        })

                    }
                })
            })
        })
        function detail(e) {
            var id = e;
            $.ajax({
                type: 'POST',
                url: "{:U('About/detail')}",
                data: {
                    id: id,
                },
                dataType: "html",
                success: function (data) {
                    //console.dir(data.news_typename);
                    var data = JSON.parse(data);
                    var str = '<div><div class="right_product2">' + data.news_typename + '</div><div class="right_product3"><img src="__PUBLIC__/' + data.news_img + '" width="265" height="169"></div><div class="right_product4">产品详情</div> <div class="right_product5">' + data.news_content + '</div></div>';
                    $('.right1').next('div').replaceWith(str);
                }
            })

        }
    </script>

</block>